<template>
  <div class="main ad-manage-list">
    <section>
      <!--<div class="btn-block">-->
        <!--<router-link :to="{name: 'fixedEdit'}" class="filter-item">-->
          <!--<el-button type="success" size="small" icon="el-icon-circle-plus" plain>新建广告</el-button>-->
        <!--</router-link>-->
      <!--</div>-->
      <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
        <input type="text" style="display: none"/><!--form input placeholder-->
        <el-row :gutter="50">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="广告名称：" prop="adName">
              <el-input @keyup.enter.native="search" v-model="listQuery.advertName" placeholder="广告名称" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" class="btn-item">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
          <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="名称" prop="advertName"></el-table-column>
        <el-table-column align="center" label="开始时间">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.startTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.endTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否启用" width="120">
          <template slot-scope="scope">
            <span v-text="scope.row.fixedStatus === 1 ? '是' : '否'" :style="`color: ${scope.row.fixedStatus === 1?'#1a9f03':'#999'}`"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120" v-if="rightsButtons['edit']">
          <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editDetail(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageIndex"
        :page-size="listQuery.pageSize"
        background
        layout="total, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>

<script>
  import { getWindowAdList } from '@/api/advert'
    export default {
      name: "adFixed",
      data() {
        return {
          list: [],
          listQuery: {
            advertName: '',
            pageIndex: 1,
            pageSize: 10,
            isPage: 1
          },
          listTotal: 0,
          listLoading: false,
        }
      },
      created() {
          this.getList()
      },
      methods: {
          // 获取列表
          getList() {
            getWindowAdList(this.listQuery).then(res => {
              this.list = res.data
              this.listTotal = res.totalCount
            })
          },

        // 编辑详细内容
        editDetail(val) {
            window.localStorage.setItem('38Detail', JSON.stringify(val))
            this.$router.push({path: '/ad/fixed/edit', query: { id: val.id }})
        },

        search() {
          this.listQuery.pageIndex = 1;
          this.getList();
        },

        // 切换分页
        handleCurrentChange(page) {
          this.listQuery.pageIndex = page;
          this.getList();
        },
      },
    }
</script>

<style scoped>

</style>
